<template>
    <div class="app-container  photoRegisterDailog">
        <div class="main-container-content">
            <el-row :gutter="10">

                <div class="contentBoxs_form">

                    <el-col :xs='24' :sm="16" :md="11" :lg="11" :xl="10">

                        <el-form :model="baseInfo" :rules="baseInfoFormRules" ref="baseInfoForm" label-width="78px"
                            class="demo-ruleForm contentBoxs_form_box">
                            <div class="photoRegisterDailog_title">
                                <div class="titleContent_left">
                                    <div class="titleContent_left_line"></div>
                                    <div class="titleContent_left_title">
                                        教学库设置
                                    </div>
                                </div>
                                <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>

                            </div>
                            <div class="contentDailog_contents">
                                <div class="flexDiv">
                                    <el-form-item label="序号" prop="id">
                                        <el-input v-model="baseInfo.id" placeholder="无需填写，系统默认" class="idNumInput0"
                                            disabled>
                                        </el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item label="库编号" prop="teachingLibrariesNumber">
                                    <el-input v-model="baseInfo.teachingLibrariesNumber" placeholder="教学库编号"
                                        class="idNumInput0">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="库名称" prop="teachingLibrariesName">
                                    <el-input v-model="baseInfo.teachingLibrariesName" placeholder="教学库名称"
                                        class="idNumInput0">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="管理教师" prop="usersIds">
                                    <el-select v-model="baseInfo.usersIds" placeholder="请选择" multiple collapse-tags
                                        clearable class="idNumInput0">
                                        <el-option v-for="item in usersIdsList" :key="item.scanId" :label="item.scanName"
                                            :value="item.scanId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="使用学生" prop="studentUserIds">
                                    <el-select v-model="baseInfo.studentUserIds" placeholder="请选择" clearable multiple
                                        collapse-tags class="idNumInput0">
                                        <el-option v-for="dict in sexArray" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="创建时间">
                                    <el-date-picker v-model="baseInfo.createTime" type="datetime" placeholder="请选择创建时间"
                                        size="mini" value-format="yyyy-MM-dd HH:mm:ss" @blur="compareCreateTimeStart"
                                        class="idNumInput0">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="结束时间">
                                    <el-date-picker v-model="baseInfo.teachingLibrariesEndTime" type="datetime"
                                        placeholder="请选择结束时间" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
                                        @blur="compareCreateTimeEnd" class="idNumInput0">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="" prop="release" class="noLabelItem">
                                    <div style="color:red">*在有效时间段内发布状态的数据库，学生才可以学习</div>
                                    <el-radio-group v-model="baseInfo.release">
                                        <el-radio :label="0">发布(学生可见)</el-radio>
                                        <el-radio :label="1">不发布(学生不可见)</el-radio>

                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="" prop="verify" class="noLabelItem">
                                    <el-radio-group v-model="baseInfo.verify">
                                        <el-radio :label="0">需要审核通过才能浏览</el-radio>
                                        <el-radio :label="1">申请即自动审核通过</el-radio>

                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item label="备注" prop="teachingLibrariesRemark">
                                    <el-input type="textarea" :rows="2" placeholder="请输入内容"
                                        v-model="baseInfo.teachingLibrariesRemark">
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="closeEvent">暂 存</el-button>
                                    <el-button type="primary" @click="submitForm()">保 存</el-button>

                                </el-form-item>
                            </div>

                        </el-form>

                    </el-col>
                </div>
            </el-row>

        </div>

    </div>
</template>
    
<script>
import { vxRule } from '@/libs/validator';
export default {
    name: "addTeach",
    dicts: [

    ],
    components: {

    },
    data() {
        return {
            // 顾客信息
            baseInfo: {
                id: null,
                teachingLibrariesNumber: '',
                teachingLibrariesName: '',
                teachingLibrariesRemark: '',
                usersIds: [],
                studentUserIds: [],
                createTime: '',
                teachingLibrariesEndTime: '',
                release: 0,
                verify: 0,
            },

            // 顾客选择弹窗
            sexArray: [
                {
                    value: '0',
                    label: '女'
                }, {
                    value: '1',
                    label: '男'
                }
            ],
            usersIdsList: [],
            // 表单校验
            baseInfoFormRules: {
                teachingLibrariesName: [
                    vxRule(true, '', 'blur', '请输入教学库名称'),
                ],
                teachingLibrariesNumber: [
                    vxRule(true, '', 'blur', '请输入教学库编号'),
                ],
                usersIds: [vxRule(true, null, 'blur', '请输入管理教师')],
            },

        };
    },
    computed: {

    },
    mounted() {
        this.getUsers();

    },
    methods: {
        shijiancuo(timeVal) {
            return new Date(Date.parse(timeVal.replace(/-/g, '/'))).getTime();
        },
        compareCreateTimeStart() {
            if (
                this.baseInfo.teachingLibrariesEndTime != '' &&
                this.shijiancuo(this.baseInfo.teachingLibrariesEndTime) <
                this.shijiancuo(this.baseInfo.createTime)
            ) {
                this.$message.warning('结束时间应该大于创建时间');
                this.baseInfo.createTime = '';
            }
        },
        compareCreateTimeEnd() {
            if (
                this.baseInfo.teachingLibrariesEndTime != '' &&
                this.shijiancuo(this.baseInfo.teachingLibrariesEndTime) <
                this.shijiancuo(this.baseInfo.createTime)
            ) {
                this.$message.warning('结束时间应该大于创建时间');
                this.baseInfo.teachingLibrariesEndTime = '';
            }
        },
        getUsers() {
            this.$axios({
                method: 'GET',
                url: '/users/searchUserIdAndName/forBiopsyResearchLibraries',
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.usersIdsList = res.data.data;
                }
            });
        },
        submitForm() {
            this.$emit('close')
        },
        closeEvent() {
            this.$emit('close')
        },
    }
};
</script>
    
<style scoped lang="scss">
.photoRegisterDailog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .photoRegisterDailog_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

    }
}
</style>
    
    